<script setup lang="ts">
import { Layout, Notification } from '@arco-design/web-vue'
import Header from './header'
import Sider from './sider.vue'
import Page from '@/components/page/index.vue'
import { onMounted, onUnmounted } from 'vue'
import { OrderSocketTypeEnum } from '@/shared'

const { Content } = Layout

let ws: WebSocket | null = null

onMounted(() => {
  const cid = Math.random().toString(36).substring(2)
  const url = 'ws://localhost:8083/ws/' + cid
  if ("WebSocket" in window) {
    ws = new WebSocket(url)

    ws.onclose = () => {
      console.log('连接关闭');
    }
    ws.onmessage = (e) => {
      const data = e.data
      const json = JSON.parse(data)
      if (json.type === OrderSocketTypeEnum.PlaceOrder) {
        Notification.success({
          title: '待接单',
          content: `您有一个订单待处理，订单号：${json.orderNumber}，请及时处理`,
          duration: 0,
          closable: true
        })
      } else if (json.type === OrderSocketTypeEnum.Remind) {
        Notification.success({
          title: '被催单',
          content: `您的订单已被催单，订单号：${json.orderNumber}`,
          duration: 0,
          closable: true
        })
      }
    }
  }
})
onUnmounted(() => {
  if (ws) {
    ws.close()
    ws = null
  }
})
</script>

<template>
  <Layout class="h-full bg-gray-50 overflow-hidden">
    <Header />
    <Layout class="overflow-hidden">
      <Sider />
      <Content>
        <Page>
          <RouterView />
        </Page>
      </Content>
    </Layout>
  </Layout>
</template>
